import React, { PureComponent } from 'react';
import { connect } from '@@/plugin-dva/exports';
import styles from './index.less';
import Cookie from '@/utils/cookie.js';
import u335 from "./img/u335.png";
import u412 from "./img/u412.png";
import { history } from 'umi';
import UserFeedBack from "@/pages/HomePage/UserFeedback";

class History extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      userImg: false,
      openModel: false,
      userId: Cookie.get('userName'),
      expanded1:false,
      expanded2:false,
      expanded3:false,
      expanded4:false,
    }
  }
  //初始化
  componentDidMount() {
    this.fetchDialogueList();
  }


  fetchDialogueList = () => {
    const {dispatch} = this.props;
    const {userId} =this.state;
    dispatch({
      type: 'intellectAssistant/fetchDialogueList',
      payload: {
        sender: userId
      },
    });
  }

  clickToNewTalk = (it) => {
    const currentUser = Cookie.get('userName');
    if(window.location.pathname!=='/login' && !currentUser){
      history.push({
        pathname: '/login',
      });
    } else {
      const {dispatch} = this.props;
      dispatch({
        type: 'intellectAssistant/fetchMessageList',
        payload:{
          title:it.title,
          dialogueId:it.id,
          dialogFlag:it.dialogFlag
        }
      })
      history.push({
        pathname: '/newTalk'
      });
    }
  }

  handelOk = () => {
    this.setState({openModel: true})
  }

  submitFeedback = (feedbackText)=>{
    const { dispatch } = this.props;
    dispatch({
      type: 'intellectAssistant/fetchFeedBack',
      payload: {
        question:'',
        answer:'',
        islike:'',
        feedback:feedbackText,
      },
      callback: () => {
        this.setState({
          msgVisible:false,
          type:""
        });
      },
    });
  }

  handelCancel = () => {
    this.setState({openModel: false})
  }

  render() {
    const {openModel} =this.state
    const { dialogueList,top5List } =this.props
    // console.log(top5List);
    return (
      <div className={styles.content}>
        <div className={styles.rightIconUser}>
          <img className={styles.feedBack} src={u412} alt="" onClick={this.handelOk}/>
        </div>
        <div className={styles.title}>
          <div className={styles.iconTip}>历史对话</div>
        </div>
        {dialogueList?.todayList && dialogueList?.todayList?.length > 0 ?
          <div className={styles.contentData}>
            <div className={styles.titleBox}>
              <div className={styles.date}>今天</div>
              <div className={styles.seeMore}
                   onClick={() => this.setState(prevState => ({expanded1: !prevState.expanded1}))}>{this.state.expanded1 ? "收起" : "查看所有"}</div>
            </div>
            {(this.state.expanded1 ? dialogueList?.todayList : dialogueList?.todayList?.slice(0, 5))?.map((it, index) => (
              <div key={index + "today"} className={styles.reCommendation} onClick={() => this.clickToNewTalk(it)}>
                <img className={styles.reCommendation_icon} src={u335} alt=""/>
                <div title={it.title} className={styles.reCommendation_title}>{it.title}</div>
                {it?.dialogFlag ? <div style={{
                  backgroundColor: it.dialogFlag === "0" ? "#e9f1fe" : "#e5f8f6",
                  color: it.dialogFlag === "0" ? "#2579FF" : "#1ECCB7"
                }}
                                       className={styles.flag}>{it.dialogFlag === "0" ? "规则分析" : it.dialogFlag === "1" ? "AI取数" : ""}</div> : ""
                }
                <div className={styles.time}>{it.handleTime}</div>
              </div>
            ))}
          </div> : null
        }
        {dialogueList?.thisWeekList && dialogueList?.thisWeekList?.length > 0 ?
          <div className={styles.contentData}>
            <div className={styles.titleBox}>
              <div className={styles.date}>本周</div>
              <div className={styles.seeMore}
                   onClick={() => this.setState(prevState => ({expanded2: !prevState.expanded2}))}>{this.state.expanded2 ? "收起" : "查看所有"}</div>
            </div>
            {(this.state.expanded2 ? dialogueList?.thisWeekList : dialogueList?.thisWeekList?.slice(0, 5))?.map((it, index) => (
              <div key={index + "week"} className={styles.reCommendation} onClick={() => this.clickToNewTalk(it)}>
                <img className={styles.reCommendation_icon} src={u335} alt=""/>
                <div title={it.title} className={styles.reCommendation_title}>{it.title}</div>
                {it?.dialogFlag ? <div style={{
                  backgroundColor: it.dialogFlag === "0" ? "#e9f1fe" : "#e5f8f6",
                  color: it.dialogFlag === "0" ? "#2579FF" : "#1ECCB7"
                }}
                                       className={styles.flag}>{it.dialogFlag === "0" ? "规则分析" : it.dialogFlag === "1" ? "AI取数" : ""}</div> : ""
                }
                <div className={styles.time}>{it.handleTime}</div>
              </div>
            ))}
          </div> : null
        }
        {dialogueList?.thisMonthList && dialogueList?.thisMonthList?.length > 0 ?
          <div className={styles.contentData}>
            <div className={styles.titleBox}>
              <div className={styles.date}>本月</div>
              <div className={styles.seeMore}
                   onClick={() => this.setState(prevState => ({expanded3: !prevState.expanded3}))}>{this.state.expanded3 ? "收起" : "查看所有"}</div>
            </div>
            {(this.state.expanded3 ? dialogueList?.thisMonthList : dialogueList?.thisMonthList?.slice(0, 5))?.map((it, index) => (
              <div key={index + "month"} className={styles.reCommendation} onClick={() => this.clickToNewTalk(it)}>
                <img className={styles.reCommendation_icon} src={u335} alt=""/>
                <div title={it.title} className={styles.reCommendation_title}>{it.title}</div>
                {it?.dialogFlag ? <div style={{
                  backgroundColor: it.dialogFlag === "0" ? "#e9f1fe" : "#e5f8f6",
                  color: it.dialogFlag === "0" ? "#2579FF" : "#1ECCB7"
                }}
                                       className={styles.flag}>{it.dialogFlag === "0" ? "规则分析" : it.dialogFlag === "1" ? "AI取数" : ""}</div> : ""
                }
                <div className={styles.time}>{it.handleTime}</div>
              </div>
            ))}
          </div> : null
        }
        {dialogueList?.thisYearList && dialogueList?.thisYearList?.length > 0 ?
          <div className={styles.contentData}>
            <div className={styles.titleBox}>
              <div className={styles.date}>本年</div>
              <div className={styles.seeMore}
                   onClick={() => this.setState(prevState => ({expanded4: !prevState.expanded4}))}>{this.state.expanded4 ? "收起" : "查看所有"}</div>
            </div>
            {(this.state.expanded4 ? dialogueList?.thisYearList : dialogueList?.thisYearList?.slice(0, 5))?.map((it, index) => (
              <div key={index + "year"} className={styles.reCommendation} onClick={() => this.clickToNewTalk(it)}>
                <img className={styles.reCommendation_icon} src={u335} alt=""/>
                <div title={it.title} className={styles.reCommendation_title}>{it.title}</div>
                {it?.dialogFlag ? <div style={{
                  backgroundColor: it.dialogFlag === "0" ? "#e9f1fe" : "#e5f8f6",
                  color: it.dialogFlag === "0" ? "#2579FF" : "#1ECCB7"
                }}
                                       className={styles.flag}>{it.dialogFlag === "0" ? "规则分析" : it.dialogFlag === "1" ? "AI取数" : ""}</div> : ""
                }
                <div title={it.handleTime} className={styles.time}>{it.handleTime}</div>
              </div>
            ))}
          </div> : null
        }
        <UserFeedBack openModel={openModel} handelOk={this.handelOk} handelCancel={this.handelCancel}
                      submitFeedback={this.submitFeedback}/>
      </div>
    );
  }
}

//这里的bonceChatGpt 是创建models时取的model名   namespace："这里的bonceChatGpt"  umi会自动识别该字段进行如下解构
export default connect(({intellectAssistant }) => ({
  dialogueList: intellectAssistant.dialogueList,
  fetchDialogueList: intellectAssistant.fetchDialogueList,
  fetchDialogueOneInfo: intellectAssistant.fetchDialogueOneInfo,
  top5List: intellectAssistant.top5List
}))(History);
